<template>
  <div >
    <basic-layout title="个人额度" backBtnType="arrow" :showAddBtn="false" class="wrapBox">
      <div class="body_box_main">
        <div class="body_box">
          <van-row class="listCon">
            <van-pull-refresh class="vanScroller" v-model="refreshing" @refresh="onRefresh">
              <van-list class="vanList" v-model="loading" :finished="finished"
                        ::finished-text="employeeList.length ? '没有更多了' : ''" >
                <div v-for="(employee, index) in employeeList" :style="{ padding: calcMargin(index), }">
                  <div class="mainStyle">
                    <div class="main_01">
                      <div class="main_01_top">
                        <div class="title">
                          <!--  年份-->
                          <span> {{ employee.year }}年</span>
                        </div>

                      </div>
                      <div class="midStyle">
                        <div class="van-ellipsis">
                          <span>三级单位:</span>&nbsp;
                          <span>{{ employee.rvBaseEmployee.sjdw }}</span>
                        </div>
                        <div class="van-ellipsis">
                          <span>四级单位:</span>&nbsp;
                          <span>{{ employee.rvBaseEmployee.fjdw }}</span>
                        </div>
                        <div class="van-ellipsis">
                          <span>部门名称:</span>&nbsp;
                          <span>{{ employee.rvBaseEmployee.bmmc }}</span>
                        </div>
                        <div class="van-ellipsis">
                          <span>姓名:</span>&nbsp;
                          <span>{{ employee.rvBaseEmployee.name }}</span>
                        </div>
                        <div class="van-ellipsis">
                          <span>体检额度:</span>&nbsp;
                          <span>{{ employee.quota }}元</span>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
              <van-empty v-if="!loading && !employeeList.length" class="custom-image"
                         :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
            </van-pull-refresh>
          </van-row>

        </div>
      </div>
    </basic-layout>

    <full-loading v-if="loading"></full-loading>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import { queryFileList } from "@api/common";
import {listHealthEmployeeQuota } from "@/api/realAssets/rvhealth/employeeQuota";

export default {
  name: "applyEmployee",
  props: {},
  components: {},
  data() {
    return {

      //加载
      refreshing: false,
      loading: false,
      finished: false,

      //员工信息
      employeeList: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: JSON.parse(sessionStorage.getItem("userInfo")).userId,
      },


    };
  },
  created() {},
  computed: {},
  beforeMount() {
    //根据userId获得员工信息
    this.getEmployee();
  },
  mounted() {},
  methods: {

    //根据userId获得员工信息
    getEmployee(){
      this.loading = true;
      this.finished = false;
      listHealthEmployeeQuota(this.queryParams).then(response => {
        this.employeeList = response.data.data.list;

        this.loading = false;
        this.finished = true;
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      });
    },

    //刷新
    onRefresh() {
      this.refreshing = false;
      this.queryParams.pageNum = 1;
      this.employeeList = [];
      //查询表格数据
      this.getEmployee();
    },

    calcMargin(index) {
      if (index == 0) {
        return '10px 0px';
      } else {
        return '0px 0px 10px 0px';
      }
    },


  },
};
</script>
<style lang="less" scoped>
.update-box {
  width: 270px;
}
.sign-box {
  padding: 10px;
  box-sizing: border-box;
}
.showUpdateWin-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;

  .btn {
    margin: 0 5px;
  }
}

.finish-btn {
  position: absolute;
  right: 0;
  bottom: -8px;

  :last-child {
    color: #fff !important;
  }

  .btn {
    margin: 0 5px;
  }
}
.body_box_main {
  background-color: #f9f9f9;
  height: 100%;


  .body_box {
    background-color: #f9f9f9;
    height: 100%;

    .listCon {
      height: 100%;

      .vanScroller {
        height: 100%;
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 0px !important;
          height: 0px !important;
        }

        .vanList {

          .mainStyle {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            background: rgb(255, 255, 255);
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
            max-height: 300px;
            padding: 5px 10px 0px 10px;

            .main_01 {
              flex-direction: column;
              justify-content: space-around;
              width: 100%;

              .main_01_top {
                height: 40px;
                width: 100%;
                font-size: 16px;
                font-weight: 600;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                border-bottom: 1px solid #eee;

                .title {
                  display: flex;

                  .vanTagStyle {

                    .title_span {
                      color: #f69b52;
                      font-weight: 600;
                    }
                  }
                }

                .yystatusStyle {
                  color: #3CB371;
                  font-size: 13px;
                }

                .noyystatusStyle {
                  color: #808080;
                  font-size: 13px;
                }

              }

              .midStyle {
                max-height: 200px;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                position: relative;
                margin-bottom: 10px;

                .van-ellipsis {
                  color: #9e9e9f;
                  margin-top: 5px;
                  height: 24px;
                  line-height: 24px;

                  span:first-child {
                    font-size: 14px;
                  }

                  span:last-child {
                    font-size: 14px;
                    color: #504f4f;
                  }

                }
              }
            }
          }

        }
      }
    }
  }
}

/deep/ .van-tabs {
  height: 100%;
}

/deep/ .van-tabs__content {
  height: calc(100% - 44px);
}

/deep/ .van-tab__pane {
  height: 100%;
}


.midMain {
  //max-height: 120px;
  max-height: 120px;
  //min-height: 80px;
  //height: 100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  border-bottom: 1px solid #eee;

  .topContent {
    color: #9e9e9f;
    margin-top: 5px;
    height: 24px;
    line-height: 24px;

    span:first-child {
      font-size: 14px;
    }

    span:last-child {
      font-size: 14px;
      color: #504f4f;
    }
  }

  .buttonContent {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5px;

    .left {
      width: 80%;

      .f {
        color: #9e9e9f;
        margin-top: 5px;
        //height: 24px;
        //line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }


      .s {
        color: #9e9e9f;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 24px;
        line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }

    }

    .left_02 {
      width: 100%;

      .f {
        color: #9e9e9f;
        margin-top: 5px;
        //height: 24px;
        //line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }


      .s {
        color: #9e9e9f;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 24px;
        line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }

    }


    .btn {
      width: 20%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .van-button {
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        border-radius: 17px;
        font-size: 13px;
      }
    }
  }

  //&:before {
  //  content: '';
  //  position: absolute;
  //  margin-top: 100px;
  //  width: 100%;
  //  height: 1px;
  //  background: #8080804a;
  //}

}

.flexBtn {
  display: flex;
  justify-content: space-between;

  div {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #1e93ff;
    font-size: 15px;
  }

  p {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #1e93ff;
    font-size: 15px;
  }

  div:nth-of-type(1) {
    box-sizing: border-box;
    border-right: 1px solid #eee;
    color: #f25454;
  }
}
</style>
